<template>
  <div class="main-page">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchDrugList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
        >批量删除</el-button>

        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
        >导出</el-button>
      </div>-->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="drugPairData"
          tooltip-effect="dark"
          style="font-size: 12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop label="操作" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogDurgPair(scope.row.id,scope.row.drugName,scope.row.drugUniqueCode)"
              >药品配对</el-button>
              <el-button type="text" @click="getRMData(scope.row.drugUniqueCode)">溶媒设置</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="hs_NAME" label="医院名称" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="drugCode" label="药品编号" width="80" />
          <el-table-column label="药品类型" show-overflow-tooltip width="80">
            <template
              slot-scope="scope"
            >{{(scope.row.drugNameType==1)?"西药":(scope.row.drugNameType==2)?"中药":"不确定"}}</template>
          </el-table-column>
          <el-table-column prop="drugName" label="医院药品名称" show-overflow-tooltip width="150" />
          <el-table-column prop="mdhsDrugName" label="配对药品名称" show-overflow-tooltip width="124" />
          <el-table-column prop="mdhsFormName" label="配对剂型" show-overflow-tooltip width="80" />
          <el-table-column prop="mdhsDrugSpec" label="配对规格" show-overflow-tooltip width="80" />
          <el-table-column prop="mdhsCompName" label="配对药品厂家" show-overflow-tooltip width="180" />
          <el-table-column prop="is_anti" label="抗菌药" show-overflow-tooltip width="65">
            <template slot-scope="scope">{{(scope.row.is_anti==1)?"是":"否"}}</template>
          </el-table-column>
          <el-table-column label="配对状态" show-overflow-tooltip width="80">
            <template
              slot-scope="scope"
            >{{(scope.row.matchState==1)?"已配对":(scope.row.matchState==0)?"未配对":"无法配对"}}</template>
          </el-table-column>
          <el-table-column label="配对人员/时间" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.matchUser}}/{{getDate(scope.row.matchTime)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[20, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 药品配对dialog////////////////////////////// -->
    <el-dialog
      title="药品配对"
      :visible.sync="dialogDurgPairVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div style="display:flex">
        <!-- <el-card class="dialog-card1">
          <div
            slot="header"
            class="clearfix"
          >
            <span class="dialogCardName">本院药品信息</span>
          </div>
          <div class="item">
            <el-form
              :model="dialogData"
              label-width="80px"
            >
              <el-form-item label="药品名称">
                <el-input
                  size="mini"
                  v-model="dialogData.id"
                ></el-input>
              </el-form-item>
              <el-form-item label="药品编码">
                <el-input
                  size="mini"
                  v-model="dialogData.drugName"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>-->
        <el-card class="dialog-card2">
          <div slot="header" class="clearfix">
            <span class="dialogCardName">本院药品信息</span>
          </div>
          <div class="item">
            <el-form :model="dialogData" label-width="80px" style="display:flex">
              <div style="width:50%">
                <el-form-item label="药品名称">
                  <el-input size="mini" v-model="dialogData.ypmc"></el-input>
                </el-form-item>
                <el-form-item label="批准文号">
                  <el-input size="mini" v-model="dialogData.pzwh"></el-input>
                </el-form-item>
              </div>
              <div style="width:60%">
                <div style="display:flex">
                  <el-form-item style="width:50%;margin-right:0px" label-width="40px" label="剂型">
                    <el-input size="mini" v-model="dialogData.ypjx"></el-input>
                  </el-form-item>
                  <el-form-item style="width:50%" label-width="40px" label="规格">
                    <el-input size="mini" v-model="dialogData.ypgg"></el-input>
                  </el-form-item>
                </div>

                <el-form-item label="厂家" label-width="40px">
                  <el-input size="mini" v-model="dialogData.ypcj"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-card>
        <el-card class="dialog-card2" style="margin-left:8px;">
          <div slot="header" class="clearfix">
            <span class="dialogCardName">配对药品信息</span>
          </div>
          <div class="item">
            <el-form :model="dialogData" label-width="80px" style="display:flex">
              <div style="width:50%">
                <el-form-item label="药品名称">
                  <el-input size="mini" v-model="dialogData.mdhsDrugName"></el-input>
                </el-form-item>
                <el-form-item label="批准文号">
                  <el-input size="mini" v-model="dialogData.mdhsApprovalCode"></el-input>
                </el-form-item>
              </div>
              <div style="width:60%">
                <div style="display:flex">
                  <el-form-item style="width:50%;margin-right:0px" label-width="40px" label="剂型">
                    <el-input size="mini" v-model="dialogData.mdhsFormName"></el-input>
                  </el-form-item>
                  <el-form-item style="width:50%" label-width="40px" label="规格">
                    <el-input size="mini" v-model="dialogData.mdhsDrugSpec"></el-input>
                  </el-form-item>
                </div>
                <el-form-item label="厂家" label-width="40px">
                  <el-input size="mini" v-model="dialogData.mdhsCompName"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-card>
      </div>
      <el-card class="dialog-card3 dialog-card">
        <div class="clearfix">
          <el-form
            :inline="true"
            :model="dialogData"
            style="margin-left:15px"
            class="demo-form-inline"
          >
            <el-form-item label="药品信息">
              <el-input v-model="dialogData.SearchdrugInfo" size="mini" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item label="搜索厂家">
              <el-input v-model="dialogData.SearchManufactor" size="mini" placeholder="厂家搜索"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="dialogSearch()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="dialogData.drugPairSearchData"
          stripe
          border
          height="200"
          style="width: 100%;font-size:12px"
          :header-cell-style="{background:'#f4f4f4'}"
          ref="todoListRef"
          @row-click="handleRow"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label width="35">
            <template slot-scope="scope">
              <el-radio
                :label="scope.row.id"
                v-model="dialogData.id"
                @change.native="handleSelectionChange(scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="drugCode" label="系统药品编码" width="100"></el-table-column>
          <el-table-column prop="drugName" label="系统药品名称" width="210"></el-table-column>
          <el-table-column prop="doseUnit" label="给药单位" width="80"></el-table-column>
          <el-table-column prop="formName" label="剂型" width="120"></el-table-column>
          <el-table-column prop="drugSpec" label="规格" width="80"></el-table-column>
          <el-table-column prop="compName" label="药品厂家"></el-table-column>
        </el-table>
      </el-card>
      <el-card class="dialog-card4 dialog-card">
        <el-table
          :data="dialogData.drugUnitData"
          stripe
          border
          height="47.4"
          :header-cell-style="{background:'#f4f4f4'}"
          :cell-style="{'text-align':'center'}"
          style="width: 100%;font-size:12px"
          class="UnitTable"
        >
          <el-table-column prop="jjdw" label="药品计价单位和医院给药单位">
            <template slot-scope="scope">
              1{{scope.row.jjdw}}=
              <el-input size="mini" v-model="dialogData.zdfz"></el-input>/
              <el-input size="mini" v-model="dialogData.zdfm"></el-input>
              {{scope.row.dose_unit}}
            </template>
          </el-table-column>
          <el-table-column prop="ypjx" label="最小计价单位和医院给药单位">
            <template slot-scope="scope">
              1{{scope.row.gjgydw}}=
              <el-input size="mini" v-model="dialogData.zxfz"></el-input>/
              <el-input size="mini" v-model="dialogData.zxfm"></el-input>
              {{scope.row.dose_unit}}
            </template>
          </el-table-column>
          <el-table-column prop="ypgg" label="本院给药单位和系统给药单位(无法换算填-1)" width="260">
            <template slot-scope="scope">
              1{{scope.row.dose_unit}}=
              <el-input size="mini" v-model="dialogData.fz"></el-input>/
              <el-input size="mini" v-model="dialogData.fm"></el-input>
              {{scope.row.mdhs_unit}}
            </template>
          </el-table-column>
          <el-table-column label="注射液给药单位和体积单位">
            <template slot-scope="scope">
              1{{scope.row.dose_unit}}=
              <el-input size="mini" v-model="dialogData.zsdw"></el-input>/
              <el-input size="mini" v-model="dialogData.tjdw"></el-input>ml
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="close">药品无法配对</el-button>
        <el-button type="success" @click="SaveDrugPair">保存配对</el-button>
      </span>
    </el-dialog>
    <!-- 溶媒设置dialog////////////////////////////// -->
    <el-dialog
      title="溶媒单位转换设置"
      :visible.sync="dialogMenstruumSet"
      width="60%"
      :before-close="handleClose"
    >
      <div style="display:flex">
        <el-card style="width:100%">
          <div slot="header" class="clearfix">
            <span class="dialogCardName">本院药品信息</span>
          </div>
          <div class="item">
            <el-form
              :inline="true"
              :model="RMData.drugInfo"
              style="margin-left:15px"
              class="demo-form-inline"
            >
              <el-form-item label="药品名称">
                <el-input v-model="RMData.drugName" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="药品编码">
                <el-input v-model="RMData.drugCode" size="mini"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>

      <el-card class="dialog-card4 dialog-card">
        <el-table
          :data="dialogData.drugUnitData"
          stripe
          border
          height="47.4"
          style="width: 100%;font-size:12px"
          :header-cell-style="{background:'#f4f4f4'}"
        >
          <el-table-column prop="ypcj" label="本院药品生产厂家" width="180"></el-table-column>
          <el-table-column prop="ypjx" label="本院剂型" width="90"></el-table-column>
          <el-table-column prop="ypgg" label="本院规格" width="120"></el-table-column>
          <el-table-column label="本院给药单位" width="100">
            <template slot-scope="scope">1{{scope.row.dose_unit}}</template>
          </el-table-column>
          <el-table-column width="40">=</el-table-column>
          <el-table-column label="配对给药单位(无法换算填-1)">
            <template slot-scope="scope">
              <el-input size="mini" class="unit" v-model="RMData.unitMdhs"></el-input>
              <label>ml</label>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">设置为非溶媒</el-button>
        <el-button type="primary" @click="SaveRmSet()">保存转换</el-button>
        <el-button type="primary" @click="dialogMenstruumSet = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getDrugPairList,
  getdate,
  getDrugEditList,
  getPairSearchList,
  getDrugMenstrList,
  getDrugUnitList,
  SaveDrugPair,
  SaveRmSet,
  SavenoDrugmatch,
  SaveNoRmSet,
} from "@/api/rad";
// import Axios from "axios";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar,
  },
  data() {
    return {
      // 列表的参数对象
      multipleSelection: {},
      queryInfo: {
        srm: "",
        match_state: "",
        drugNameType: "",
        rm: "",
        page: 1,
        pageSize: 20,
      },
      total: 0,
      drugPairData: [],
      dialogDurgPairVisible: false,
      dialogMenstruumSet: false,
      dialogData: {
        // 本院药品信息
        radioId: "",
        id: "",
        ypmc: "",
        ypjx: "",
        ypgg: "",
        pzwh: "",
        ypcj: "",
        ypwydm_encode: "",
        //配对药品信息
        mdhsDrugName: "",
        mdhsFormName: "",
        mdhsDrugSpec: "",
        mdhsApprovalCode: "",
        mdhsCompName: "",
        //搜索信息
        SearchdrugInfo: "",
        SearchManufactor: "",
        //dialog搜索数组
        drugPairSearchData: [],
        SavePairCode: "",
        // 药品的给药单位
        drugUnitData: [],
        // drugUnitList: {
        //   id: 312312,
        //   ypwydm_encode: 213123123,
        //   id: 3333,
        //   ypwydm_encode: 213123333,
        // },

        zdfz: "",
        zdfm: "",
        zxfz: "",
        zxfm: "",
        fz: "",
        fm: "",
        zsdw: "",
        tjdw: "",
        jj_unit: "",
        zxjj_unit: "",
        dose_unit: "",
        mdhs_unit: "",
        kfgydw: "",
        gjgydw: "",
        jjdw: "",
      },
      RMData: {
        drugName: "",
        drugCode: "",
        unitMdhs: "",
        drugUniqueCode: "",
      },
      tableData: [],
    };
  },
  created: function () {
    this.getDrugPairList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDrugPairList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      // console.log(newPage)
      // console.log("handleCurrentChange")
      this.queryInfo.page = newPage;

      this.getDrugPairList();
    },
    // api
    async getDrugPairList() {
      let _this = this;
      let res = await this.$rad.getDrugPairList({
        srm: this.queryInfo.srm,
        match_state: this.queryInfo.match_state,
        drugNameType: this.queryInfo.drugNameType,
        rm: this.queryInfo.rm,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize,
      });
      console.log(res);
      this.drugPairData = res.rows;
      this.total = res.total;
      // console.log(this.total)
    },
    //获取搜索列表
    getSearchDrugList(data) {
      this.queryInfo.srm = data.srm;
      this.queryInfo.match_state = data.match_state;
      this.queryInfo.drugNameType = data.drugNameType;
      this.queryInfo.rm = data.rm;
      // console.log(this.queryInfo)
      this.getDrugPairList();
    },
    // 时间戳转时间
    getDate(data) {
      return this.$rad.getdate(data);
    },
    // dialog事件
    handleClose(done) {
      done();
    },
    close() {
      this.$confirm("确定无法配对药品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.SavenoDrugmatch();
        })
        .catch(() => {});
    },
    async SavenoDrugmatch() {
      let res = await this.$rad.SavenoDrugmatch({
        drugUniqueCode: this.dialogData.drugUniqueCode,
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogDurgPairVisible = false;
        this.getDrugPairList();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    async dialogSearch() {
      // console.log(this.dialogData.drugUniqueCode)
      // console.log(this.dialogData.SearchdrugInfo)
      // console.log(this.dialogData.SearchManufactor)
      let res = await this.$rad.getPairSearchList({
        srm: this.dialogData.SearchdrugInfo,
        compName: this.dialogData.SearchManufactor,
        drugUniqueCode: this.dialogData.drugUniqueCode,
      });
      this.dialogData.drugPairSearchData = res;
      // console.log("dialogtable");
      console.log(res);
      // console.log(this.drugPairSearchData)
    },
    async getDrugUnitList(drugUniqueCode) {
      let res = await this.$rad.getDrugUnitList({
        drugUniqueCode: drugUniqueCode,
      });

      this.dialogData.drugUnitData = res;
      // this.RMData.unitMdhs = res[0].rm;
      console.log(res[0]);
      this.dialogData.zdfz = res[0].zdfz;
      this.dialogData.jjdw = res[0].jjdw;
      this.dialogData.zdfm = res[0].zdfm;
      this.dialogData.zxfz = res[0].zxfz;
      this.dialogData.zxfm = res[0].zxfm;
      this.dialogData.fz = res[0].fz;
      this.dialogData.fm = res[0].fm;
      this.dialogData.zsdw = res[0].zsdw;
      this.dialogData.tjdw = res[0].tjdw;
      this.dialogData.jj_unit = res[0].jj_unit;
      this.dialogData.zxjj_unit = res[0].zxjj_unit;
      this.dialogData.dose_unit = res[0].dose_unit;
      this.dialogData.mdhs_unit = res[0].mdhs_unit;
      this.dialogData.kfgydw = res[0].kfgydw;
      this.dialogData.gjgydw = res[0].gjgydw;
      this.dialogData.jjdw = res[0].jjdw;
    },
    async dialogDurgPair(id, drugName, drugUniqueCode) {
      this.dialogData.id = id;
      this.dialogData.drugName = drugName;
      this.dialogData.drugUniqueCode = drugUniqueCode;
      this.dialogData.SearchdrugInfo = drugName;
      let res = await this.$rad.getDrugEditList({
        userDrugMatchId: drugUniqueCode,
      });
      // console.log(res);
      // this.dialogData.ypmc = res.cantdrug.ypmc;
      // this.dialogData.ypjx = res.cantdrug.ypjx;
      // this.dialogData.ypgg = res.cantdrug.ypgg;
      // this.dialogData.pzwh = res.cantdrug.pzwh;
      // this.dialogData.ypcj = res.cantdrug.ypcj;
      // this.dialogData.ypwydm_encode = res.cantdrug.ypwydm_encode;
      this.dialogData.mdhsDrugName = res.drug.mdhsDrugName;
      this.dialogData.mdhsFormName = res.drug.mdhsFormName;
      this.dialogData.mdhsDrugSpec = res.drug.mdhsDrugSpec;
      this.dialogData.mdhsApprovalCode = res.drug.mdhsApprovalCode;
      this.dialogData.mdhsCompName = res.drug.mdhsCompName;
      this.dialogSearch();
      this.dialogDurgPairVisible = true;
      this.getDrugUnitList(drugUniqueCode);
    },

    async SaveDrugPair() {
      var matchData = [];
      matchData.push({ id: this.dialogData.id });
      matchData.push({ ypwydm_encode: this.dialogData.ypwydm_encode });
      matchData.push({ drugUniqueCode: this.dialogData.drugUniqueCode });
      matchData.push({ jj_unit: this.dialogData.jj_unit });
      matchData.push({ zxjj_unit: this.dialogData.zxjj_unit });
      matchData.push({ dose_unit: this.dialogData.dose_unit });
      matchData.push({ mdhs_unit: this.dialogData.mdhs_unit });
      matchData.push({ fz: this.dialogData.fz });
      matchData.push({ fm: this.dialogData.fm });
      matchData.push({ zdfz: this.dialogData.zdfz });
      matchData.push({ zdfm: this.dialogData.zdfm });
      matchData.push({ zxfz: this.dialogData.zxfz });
      matchData.push({ zxfm: this.dialogData.zxfm });
      matchData.push({ zsdw: this.dialogData.zsdw });
      matchData.push({ tjdw: this.dialogData.tjdw });
      matchData.push({ rm: this.dialogData.rm });
      matchData.push({ matchUser: sessionStorage.getItem("username") });
      matchData.push({ insert_time: new Date().getTime() });
      matchData.push({ kfgydw: this.dialogData.kfgydw });
      matchData.push({ gjgydw: this.dialogData.gjgydw });
      matchData.push({ jjdw: this.dialogData.jjdw });
      // console.log(window.localStorage.getItem("user"));
      console.log(sessionStorage.getItem("username"));
      // let res = await this.$rad.SaveDrugPair({
      //   // drugId: this.dialogData.id,
      //   // drugUniqueCode: this.dialogData.drugUniqueCode,
      //   // drugUnitList: this.dialogData.drugUnitList
      //   drugId: 3124124,
      //   drugUniqueCode: 24324,
      //   drugUnitList: this.dialogData.drugUnitList,
      // });
      // console.log(res);
    },
    getRMData(drugUniqueCode) {
      this.RMData.drugUniqueCode = drugUniqueCode;
      this.getDrugMenstrList();
      this.getDrugUnitList();
    },
    async getDrugMenstrList() {
      let res = await this.$rad.getDrugMenstrList({
        userDrugMatchId: this.RMData.drugUniqueCode,
      });
      console.log(res);
      this.RMData.drugName = res.drug.drugName;
      this.RMData.drugCode = res.drug.drugCode;
      this.dialogMenstruumSet = true;
    },
    async SaveRmSet() {
      let res = await this.$rad.SaveRmSet({
        drugCode: this.RMData.drugCode,
        rm: this.RMData.unitMdhs,
      });
      console.log(this.RMData.unitMdhs);
      if (res.code == 1) {
        this.dialogMenstruumSet = false;
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    handleSelectionChange(val) {
      // console.log(res);
      this.multipleSelection = val;
    },
    handleRow(row) {
      console.log(row.id);
      this.dialogData.id = row.id;
      this.multipleSelection = row;
    },
  },
};
</script>
<style scoped>
.main-page {
  font-size: 12px;
}
.box-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 12px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 12px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.el-table >>> .el-button {
  font-size: 12px;
}
.block >>> .el-input__inner .el-pagination {
  font-size: 12px;
}
.item {
  font-size: 12px;
}
.dialog-card {
  margin-top: 10px;
}
.dialogCardName {
  font-size: 12px;
}
.el-card >>> .el-card__header {
  background-color: #f4f4f4;
  padding: 10px 0px 10px 20px;
  color: #696969;
  font-weight: bold;
}
.el-card >>> .el-card__body {
  padding: 0px;
}
.dialog-card1 {
  width: 35%;
}
.dialog-card2 {
  width: 50%;
}
.el-form >>> .el-form-item {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.el-form-item >>> .el-form-item__label {
  font-size: 12px;
  color: #808080;
}
.dialog-card2 >>> .el-card__header {
  background-color: #f4f4f4;
  padding: 10px 0px 10px 20px;
  color: #696969;
  font-weight: bold;
}
.dialog-card2 >>> .el-input__inner {
  border: 0px;
}
.unit {
  width: 80px;
}
.UnitTable >>> .el-input {
  width: 27%;
}
</style>
